<template>
  <section class="people-static-info">
    <DivShell title="人口统计">
      <div class="container">
        <div>
          <p>
            <label>人口总数</label>
            <span>{{communityData.peopleTotal}}</span>
          </p>
        </div>
        <div>
          <p>
            <label>户籍人口</label>
            <span>{{communityData.aoiStatist.regisPeople}}</span>
          </p>
          <p>
            <label>非户籍人口</label>
            <span>{{communityData.aoiStatist.noRegisPeople}}</span>
          </p>
        </div>
        <div>
          <p>
            <label>港澳台人口</label>
            <span>{{communityData.aoiStatist.hkmtPeople}}</span>
          </p>
          <p>
            <label>国外人口</label>
            <span>{{communityData.aoiStatist.foreignPeople}}</span>
          </p>
        </div>
      </div>
    </DivShell>
  </section>
</template>

<script>
import { mapGetters } from 'vuex'
import DivShell from '@src/components/divShell.vue'
export default {
  name: "PeopleStaticInfo",
  components:{
    DivShell
  },
  props: {
    title:{
      type: String,
      default:'丰图精准决策数字底板'
    }
  },
  data() {
    return {
     
        
    };
  },
  computed: {
    ...mapGetters(['communityData']),
  },
  mounted() {
     
  },
  methods: {
    
  },
  beforeDestroy() {
      
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .people-static-info{
    margin-bottom: 18px;
    & .container{
      &>div{
        padding-left: 49px;
        padding-right: 17px;
        box-sizing: border-box;
        height: 34px;
        line-height: 34px;
        display: flex;
        justify-content: space-between;
        &>p{
          display: flex;
          label{
            width: 80px;
            font-size: 14px;
            color: #6C7799;
            margin-right: 16.5px;
            text-align: left;
          }
          span{
            font-size: 16px;
            color: #9CA7C7;
          }
        }
        &:nth-of-type(1){
          background: url('../../../assets/img/people-totla.png') 4px center no-repeat;
          background-size: 28px 28px;
          & label{
            color: #B3BBD4;
          }
          & span{
            color: #B3BBD4;
            background: linear-gradient(to right,#03DCEF,#307FFF);
            -webkit-background-clip:text;
            color: transparent;
          }
        }
      }
    }
  }
</style>
